import { Component, PropsWithChildren } from 'react'
import { View, Text, Image, Button } from '@tarojs/components'
import { AtIcon } from "taro-ui"
import { AtNoticebar, AtList, AtListItem } from 'taro-ui'
import Image1 from '../../picture/dian.png'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  onClick() {
    Taro.navigateTo({
      url: '/pages/MorePages/index'
    })
  }
  onClick1() {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  render() {
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <View className='icons'>
              <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
              <View>|</View>
              <AtIcon onClick={this.onClick1.bind(this)} className='icon' value='home' size='24' color='#fff'></AtIcon>
            </View>
            <Text className='tit'>详情</Text>
          </View>
        </View>
        <View className='container'>
          <View className='js'>
            <View className='left'>
              <View className='tit'>易居房产</View>
              <View className='name'>侍美丽</View>
              <View className='tel'>
                <View className='icon'>
                  <AtIcon className='phone' value='phone' size='17' color='#fff'></AtIcon>
                </View>
                <Text>13773992453</Text>
              </View>
              <View className='address'>
                <AtIcon value='map-pin' size='17' color='#cccc'></AtIcon>
                <Text>长江路105号东50米</Text>
              </View>
            </View>
            <View className='right'>
              <Image src={Image1} />
            </View>
          </View>
          <View className='tabs'>
            <View className='tab1'>
              <Text style={{ fontWeight: 'bold', fontSize: '20px' }}>卖房</Text>
              <Text>买房</Text>
            </View>
            <View className='tab2'>
              房源: <Text>25</Text>
            </View>
          </View>
          <View className='cardList'>
            <Image src='https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394' />
            <View className='desc'>
              <View className='tit'>兴鸿一品大2室送实用内阁阁楼</View>
              <View className='mian'>2室2厅1卫 | 96m²
                <Text>兴鸿一品</Text>
              </View>
              <View className='price'>
                <Text className='num'>110</Text>万元
                <Text className='da'>11458.33元/m²</Text>
                <Text className='day'>2天前</Text>
              </View>
            </View>
          </View>
          <View className='cardList1'>
            <Image src='https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' />
            <View className='desc'>
              <View className='tit'>帝景豪苑3室精装拎包入寝含双楼层双阳台</View>
              <View className='mian'>3室2厅2卫 | 143m²
                <Text>帝景豪苑</Text>
              </View>
              <View className='price'>
                <Text className='num'>195</Text>万元
                <Text className='da'>13636.36元/m²</Text>
                <Text className='day'>2天前</Text>
              </View>
            </View>
          </View>
          <View className='cardList'>
            <Image src='https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394' />
            <View className='desc'>
              <View className='tit'>兴鸿一品大2室送实用内阁阁楼</View>
              <View className='mian'>2室2厅1卫 | 96m²
                <Text>兴鸿一品</Text>
              </View>
              <View className='price'>
                <Text className='num'>110</Text>万元
                <Text className='da'>11458.33元/m²</Text>
                <Text className='day'>2天前</Text>
              </View>
            </View>
          </View>
        </View>
        <View className='zf'>
          <View className='img'>
            <Image src="https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334"></Image>
          </View>
          <Button className='wt'>委托找房</Button>
        </View>
        <View className='btn'>
          <View className='share'>
            <AtIcon value='external-link' size='30' color='#000'></AtIcon>
            <View>分享</View>
          </View>
          <View className='Btns'>
            <Button className='btn1'>在线咨询</Button>
            <Button className='btn2'>电话咨询</Button>
          </View>
        </View>
      </View >
    )
  }
}

// https://img1.baidu.com/it/u=1342130754,306943470&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img1.baidu.com/it/u=2064254833,770634332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500
// https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375
// https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394